<template>
  <scale-box aspect-ratio="1920:1042" class="wrap" />
  <div class="inner tw-pb-20 tw-pt-4 sm:tw-pt-0 sm:tw-pb-10 tw-text-center">
    <div class="tw-text-b-primary tw-text-3xl tw-font-bold">Join the Community</div>
    <div class="tw-mt-5 tw-text-b-secondary tw-text-xl tw-font-bold">
      Chat with the community, ask questions, get involved in competitions and more!
    </div>
    <div class="tw-mt-10">
      <b-button type="warning" class="tw-mb-2" @click="handleDiscord"><i class="icon-discord tw-font-normal" />Join Discord</b-button>
      <b-button type="warning" class="tw-ml-5" @click="handleTelegram"><i class="icon-telegram tw-font-normal" />Join Telegram</b-button>
    </div>
  </div>
</template>

<script setup>

const handleDiscord = () => {
  window.open('https://discord.gg/jbjxKs2unp')
}

const handleTelegram = () => {
  window.open('https://t.me/StoneAeon')
}
</script>

<style lang="less" scoped>
  .wrap {
    background-image: url("@/assets/bg4.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    &__inner {
      position: absolute;
      bottom: 10%;
      left: 0;
      right: 0;
    }
  }
  .inner {
    background-image: linear-gradient(to bottom, #022238, #00192b);
  }
</style>